<template>
  <div id="pictureDetailPage">
    <a-row :gutter="[16, 16]">
      <!-- 图片预览 -->
      <a-col :sm="24" :md="16" :xl="18">
        <a-card title="图片预览">
          <a-image :src="picture.url" style="max-height: 600px; object-fit: contain" />
        </a-card>
      </a-col>
      <!-- 图片编辑 -->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息">
          <a-descriptions :column="1">
            <a-descriptions-item label="作者"
              ><a-space>
                <a-avatar :size="24" :src="picture.user?.userAvatar" />
                <div>{{ picture.user?.userName }}</div>
              </a-space></a-descriptions-item
            >
            <a-descriptions-item label="图片名称">{{
              picture.name ?? '未命名'
            }}</a-descriptions-item>
            <a-descriptions-item label="图片简介">{{
              picture.introduction ?? '-'
            }}</a-descriptions-item>
            <a-descriptions-item label="图片分类">{{
              picture.category ?? '默认'
            }}</a-descriptions-item>
            <a-descriptions-item label="图片标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="图片格式">
              {{ picture.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="图片比例">
              {{ picture.picScale ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="图片大小">
              {{ formatBytes(picture.picSize) ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="图片主色调">
              <a-space>
                {{ picture.picColor ?? '-' }}
                <div
                  v-if="picture.picColor"
                  :style="{
                    width: '16px',
                    height: '16px',
                    backgroundColor: toHexColor(picture.picColor),
                    borderRadius: '50%',
                  }"
                ></div>
              </a-space>
            </a-descriptions-item>
          </a-descriptions>
          <!-- 图片操作 -->
          <a-space wrap>
            <a-button type="primary" ghost :icon="h(EditOutlined)" @click="doShare"
              ><template> <template /><DownloadOutlined /></template>分享
            </a-button>
            <a-button v-if="canEdit" type="default" :icon="h(EditOutlined)" @click="doDownload"
              ><template> <template /><DownloadOutlined /></template>免费下载
            </a-button>
            <a-button
              v-if="canDelete"
              type="primary"
              :icon="h(DeleteOutlined)"
              danger
              @click="doDelete"
              >删除</a-button
            >
            <a-button v-if="canEdit" type="default" :icon="h(EditOutlined)" @click="doEdit"
              >编辑</a-button
            >
          </a-space>
        </a-card>
      </a-col>
    </a-row>
    <ShareModal ref="shareModalRef" :link="shareLink" />
  </div>
</template>
<script lang="ts" setup>
import { downloadFile } from '@/utils/index'
import { ref, onMounted, h, computed } from 'vue'
import { getPictureVoByIdUsingGet, deletePictureUsingPost } from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { formatBytes, toHexColor } from '@/utils/index'
import { EditOutlined, DeleteOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import { userLoginStore } from '@/stores/userLoginStore'
import { useRouter } from 'vue-router'
import ShareModal from '@/components/ShareModal.vue'
import { SPACE_PERMISSION_ENUM } from '@/constants/space'
const loading = ref(true)
interface Props {
  id: number | string
}
const props = defineProps<Props>()
const picture = ref<API.PictureVO>({})
const loginUserStore = userLoginStore()

// 通用权限检查函数
function createPermissionChecker(permission: string) {
  return computed(() => {
    return (picture.value.permissionList ?? []).includes(permission)
  })
}

// 定义权限检查
const canEdit = createPermissionChecker(SPACE_PERMISSION_ENUM.PICTURE_EDIT)
const canDelete = createPermissionChecker(SPACE_PERMISSION_ENUM.PICTURE_DELETE)

//获取老数据
const fetchPictureDetail = async () => {
  try {
    const res = await getPictureVoByIdUsingGet({ id: props.id })
    if (res.data.code === 200 && res.data.data) {
      const data = res.data.data
      picture.value = data
    } else {
      message.error('获取图片详情失败或' + res.data.message)
    }
  } catch (err) {
    message.error('获取图片详情失败' + err)
  }
}
//删除逻辑
function doDelete() {
  const id = picture.value.id
  if (!id) {
    return
  }
  deletePictureUsingPost({ id })
    .then((res) => {
      if (res.data.code == 200) {
        message.success('删除成功')
      } else {
        message.success('删除成功')
      }
    })
    .catch((err) => {
      message.error('删除失败' + err.data.message)
    })
}
const shareModalRef = ref()
//分享链接
const shareLink = ref('')
//分享逻辑
function doShare() {
  shareLink.value = `${window.location.origin}/picture/${picture.value.id}`
  if (shareModalRef.value) {
    shareModalRef.value.openModel()
  }
}
const router = useRouter()
//编辑事件
function doEdit() {
  router.push({
    path: '/add_picture',
    query: { id: picture.value.id, spaceId: picture.value.spaceId },
  })
}
function doDownload() {
  downloadFile(picture.value.url, picture.value.name)
}
//页面加载时获取数据
onMounted(() => {
  fetchPictureDetail()
})
</script>
<style scoped>
#pictureDetailPage {
}
</style>

